<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function doAdd(){
            var li=document.createElement("li");//创建li元素
            // var txt=document.createTextNode("li02");//创建文本节点
            // li.appendChild(txt);//li元素追加文本节点

            li.innerHTML="我是文本内容";//添加内容

            var ul=document.querySelector("ul");//获取父元素的DOM对象
            ul.appendChild(li);//父元素追加子元素

        }
        function doAdd2(){
            //创建li元素
            var li=document.createElement("li");

            //添加文本
            li.innerHTML="嘿嘿";

            //获取父元素
            var ul=document.querySelector("ul");

            //获取所有li元素的集合
            var lis=document.getElementsByTagName("li");

            // 父元素.insertBefore(新创建的元素,已经存在的元素);

            // ul.insertBefore(li,lis[2]);//在第三个li元素之前添加li


            // 父元素.replaceChild(新创建的元素,已经存在的元素);
            ul.replaceChild(li,lis[2]);//替换第三个元素
        }
    </script>
</head>
<body>
    <input type="button" value="添加元素节点" onclick="doAdd()">
    <input type="button" value="指定添加为第几个元素" onclick="doAdd2()">
    <ul>
        <li>li01</li>
        <li>li02</li>
        <li>li03</li>
        <li>li04</li>
    </ul>
</body>
</html>